<template>
    <div>
        <van-nav-bar title="登录" left-text="返回首页" left-arrow @click-left="onClickLeft" />
    </div>
    <van-tabs v-model:active="active" @click-tab="onClickTab">
        <van-tab title="账号登录" name="0"></van-tab>
        <van-tab title="验证码登录" name="1"></van-tab>
    </van-tabs>
    <div v-show="loginShow1">
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="user.userName" name="userName" label="账号" placeholder="请输入账号"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="user.password" type="password" name="password" label="密码" placeholder="请输入密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
            </van-cell-group>

            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    登录
                </van-button>
            </div>
        </van-form>
    </div>
    <div v-show="loginShow2">
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="user.phone" name="phone" label="手机号" placeholder="请输入手机号"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="user.code" name="code" label="验证码" placeholder="请输入验证码"
                    :rules="[{ required: true, message: '请填写验证码' }]">
                    <template #button>
                        <span class="send_code" style="font-size: 16px;color: cornflowerblue;"
                            v-on:click="sendCode()">{{ sendMessage }}</span>
                    </template>
                </van-field>
            </van-cell-group>

            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    登录
                </van-button>
            </div>
        </van-form>
    </div>
    <div style="text-align: center;">
        未注册，请注册 <van-icon name="plus" color="green" size="20px" @click="regist()" />
    </div>
</template>
<script setup>
import router from '@/router';
import {ref} from 'vue';
import {Login} from '@/api/user.js'
import {SendCodeMessage} from '@/api/message';
import {showFailToast, showSuccessToast} from 'vant';

const onClickLeft = () => {
    router.push('/')
};

var sendMessage = ref('发送验证码');

let timer = null;

var loginShow1 = ref(true);
var loginShow2 = ref(false);

const onClickTab = ({ name }) => makeGray(name);

var loginType = ref(0)

const user = ref({
    userName: "",
    password: "",
    phone:'',
    loginType: loginType.value
})

function makeGray(data) {
    console.info(data)
    if (data == 0) {
        loginType.value = 0
        loginShow1.value = true
        loginShow2.value = false
        clearInterval(timer)
        sendMessage.value = '发送验证码'
    } else if (data == 1) {
        loginType.value = 2
        loginShow2.value = true
        loginShow1.value = false
    }
}



const onSubmit = (values) => {
    const withLoginType = { ...values, loginType: loginType.value }; // 添加其他参数
    Login(withLoginType)
        .then(res => {
            if (res.data.data.code == 200000) {
                localStorage.setItem("token", res.data.data.data);
                router.push("/mine/index");
            } else {
                showFailToast(res.data.data.errorMessage)
            }
        }).catch(error => {
            console.info(error)
            showFailToast('登录失败')
        });
};

var sm = ref({
    phone: '',
    type: 0
})

function sendCode() {
    sm.value.phone = user.value.phone
    SendCodeMessage(sm.value).then(res => {
        if (res.data.code == 200000) {
            if (timer == null) {
                startCountdown();
                showSuccessToast('发送成功')
            }
        }
    }).catch(error => {
        console.info(error)
        showFailToast('发送失败')
    });
}

function startCountdown() {
    let count = 60;
    if (count == 0) {
        sendMessage.value = '发送验证码'
        return;
    }
    //定时任务
    timer = setInterval(() => {
        if (count == 0) {
            sendMessage.value = '发送验证码'
            clearInterval(timer)
            return;
        }
        sendMessage.value = count + '秒'
        count--;
    }, 1000)
}

function regist() {
    router.push('/user/registry')
}
</script>